<template>
  <div class="all" v-loading="loading">
    <div class="vipLevelGetAll">
      <el-select v-model="admin.term" placeholder="请选择" clearable>
        <el-option
          v-for="item in Period"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      <el-select v-model="admin.status" placeholder="请选择" clearable>
        <el-option label="等待上传发票" :value="0"></el-option>
        <el-option label="已打款" :value="1"></el-option>
        <el-option label="拒绝打款" :value="2"></el-option>
        <el-option label="等待审核发票" :value="3"></el-option>
      </el-select>
      <el-input v-model="admin.unionId" placeholder="请输入查询工会ID"></el-input>
      <el-button type="primary" @click="search">查询</el-button>
    </div>

    <el-table :data="list">
    <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
    <el-table-column align="center" prop="unionId" label="工会id" width="65"></el-table-column>
    <el-table-column align="center" prop="term" label="期次" width="90"></el-table-column>
    <el-table-column align="center" prop="income" label="结算收入" width="100"></el-table-column>
    <el-table-column align="center" label="状态" width="105">
      <template slot-scope="scope">
        <i v-if="scope.row.status==0">等待上传发票</i>
        <i v-else-if="scope.row.status==1">已打款</i>
        <i v-else-if="scope.row.status==2">拒绝打款</i>
        <i v-else>等待审核发票</i>
      </template>
    </el-table-column>
    <el-table-column align="center" prop="reason" label="拒绝原因" v-if="admin.status==2"></el-table-column>
    <el-table-column align="center" prop="transferType" label="转账方式" width="90"></el-table-column>
    <el-table-column align="center" prop="transferTime" label="转账时间" width="95"></el-table-column>
    <el-table-column align="center" prop="orderNum" label="转账单号" ></el-table-column>
    <el-table-column align="center" prop="company" label="工会公司"></el-table-column>
    <el-table-column align="center" prop="publicAccounts" label="工会对公账号"></el-table-column>
    <el-table-column align="center" prop="bankName" label="开户行" width="90"></el-table-column>
    <el-table-column align="center" prop="companyLicense" label="工会税号"></el-table-column>
    <el-table-column align="center" label="发票">
      <template slot-scope="scope" v-if="scope.row.status!=0">
        <el-link type="primary" @click="imageUrlfront=scope.row.invoice">查看</el-link>
        <el-link type="primary" @click="downloadByBlob(scope.row)">下载
        </el-link>
      </template>
    </el-table-column>
    <el-table-column align="center" label="操作">
      <template slot-scope="scope" v-if="scope.row.status==3">
        <el-button type="success" size="small" @click="Submit('agree',scope.row.id)">打款</el-button>
        <el-button type="danger" size="small" @click="Submit('refuse',scope.row.id)">拒绝</el-button>
      </template>
    </el-table-column>
      </el-table>
      <div class="Page">
            <el-pagination
            background
            hide-on-single-page
              @current-change="handleCurrentChange"
              :current-page="admin.pageNum"
              :page-size="admin.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="admin.quantity">
            </el-pagination>

      </div>
      <div class="preview_src" v-if="imageUrlfront">
        <i class="el-icon-close" @click="imageUrlfront=''"></i>
        <img :src="imageUrlfront">
      </div>
  </div>
</template>

<script>
  import {incomeGetTerms,incomeGetList,vipLevelGetAll} from '@/utils/API'
  import Cookies from 'js-cookie'
  export default{
      inject:["reload"],
    data(){
      return{
        Period:[],
        list:[],
        imageUrlfront:'',
        admin:{
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token'),
          term:'',
          status:'',
          pageNum:1,
          pageSize:15,
          quantity:0,
        },
        loading:true
      }
    },
    methods:{
      search(){
        this.admin.pageNum=1
        this.postList()
      },
       downloadByBlob(e) {
         // target="_blank" :href="scope.row.invoice" :download="scope.row.term+scope.row.company" :underline="false"
            let image = new Image()
            image.setAttribute('crossOrigin', 'anonymous')
            const i=e.invoice.slice(56)
            image.src = '/svga'+i
            image.onload = () => {
              let canvas = document.createElement('canvas')
              canvas.width = image.width
            canvas.height = image.height
       let ctx = canvas.getContext('2d')
            ctx.drawImage(image, 0, 0, image.width, image.height)
             canvas.toBlob((blob) => {
               let url = URL.createObjectURL(blob)
               let name=e.term+e.company+"发票"
               this.download(url,name)
               // 用完释放URL对象
               URL.revokeObjectURL(url)
             })
           }
         },
         download(href, name) {
            let eleLink = document.createElement('a')
            eleLink.download = name
            eleLink.href = href
            eleLink.click()
            eleLink.remove()
          },
      postList(data){
        this.loading=true
        incomeGetList(this.admin).then(res=>{
          this.list=res.data.list
          this.admin.quantity=res.data.total
          this.$nextTick(function(){
           this.loading=false
          })
        })
      },
      handleCurrentChange(val){
        this.admin.pageNum=val
        this.postList()
      },
      Submit(e,i){
             var name=''
             var type=''
             if(e=='agree'){
               name='打款单号'
               type="text"
             }else{
               name='拒绝原因'
               type="textarea"
             }
             this.$prompt(name, '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      inputPattern:  /\S/,
                      inputErrorMessage: '请输入信息',
                      customClass:'pop',
                      inputType:type
                    }).then(({ value }) => {
                       var data=new Array()
                         if(e=='agree'){
                           data={
                                    id:i,
                                    adminName:Cookies.get('adminName'),
                                    token:Cookies.get('token'),
                                    decision:e,
                                    orderNumber:value,
                                    transferType:'对公转账'
                                  }
                         }else{
                                  data={
                                    id:i,
                                    adminName:Cookies.get('adminName'),
                                    token:Cookies.get('token'),
                                    decision:e,
                                    reason:value,
                                    transferType:'对公转账'
                                  }
                         }
                              vipLevelGetAll(data).then(res=>{
                                if(res.code==0){
                                  this.$message.success('操作成功')
                                  this.reload()
                                }
                              })
                    }).catch(() => {

                    });

          },
    },
      mounted() {
                const data={
                  adminName:Cookies.get('adminName'),
                  token:Cookies.get('token'),
                }
        incomeGetTerms(data).then(res=>{
          this.Period=res.data
          this.admin.term=res.data[0]
          this.postList()
        })
      },
      watch:{
        'admin.status':{
           handler(val, oldVal){
             this.admin.pageNum=1
                     this.postList()
                    },
           deep:true
        },
        'admin.term':{
           handler(val, oldVal){
             this.admin.pageNum=1
                     this.postList()
                    },
           deep:true
        },
      }
  }
</script>

<style lang="scss">
.el-button{padding: 7px 11px;}
 .preview_src{
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  background-color: #afacac73;
  z-index: 9999;
  i{
    font-size: 45px;
    float: right;
  }
  img{
  margin: auto;
  display: block;
  margin-top: 15%;
  }
  }

 .pop{
       .el-message-box__message{
         font-size: 20px;
         font-weight: 700;
       }
       .el-input{width: 100%;}
       }
       .vipLevelGetAll{
         .el-input{width: auto;}
         .el-button{padding: 9px 15px;}
       }
</style>
